<template>
  <div class="editor-toolbar" :class="toolbarClass">
    <Transition name="toolbar-mode" mode="out-in">
      <!-- Ribbon 模式 -->
      <RibbonToolbar
        v-if="mode === 'ribbon'"
        key="ribbon"
        :active-tab="activeTabId"
        :current-mode="mode"
        @tab-change="handleTabChange"
        @mode-change="mode = $event"
      />

      <!-- Simple 模式 -->
      <SimpleToolbar
        v-else
        key="simple"
        :current-mode="mode"
        :active-tab="activeTabId"
        @mode-change="mode = $event"
        @tab-change="handleTabChange"
      />
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { computed, inject, provide, ref, watch } from "vue";
import RibbonToolbar from "./modes/RibbonToolbar.vue";
import SimpleToolbar from "./modes/SimpleToolbar.vue";
import { TOOLBAR_MODE_KEY } from "./constants";
import type { EditorProps } from "../../../types";
import { useState } from "../../../store";

defineOptions({
  name: "Toolbar",
});

// 不再需要 props，因为组件内部已经硬编码

const emit = defineEmits<{
  (e: "update:mode", mode: "simple" | "ribbon"): void;
  (e: "mode-change", mode: "simple" | "ribbon"): void;
}>();

const editorProps = inject<EditorProps | undefined>("editorProps", undefined);

const toolbarState = editorProps
  ? useState("toolbar", { value: editorProps })
  : null;

const getInitialModeFromEditorProps = (): "simple" | "ribbon" => {
  if (!editorProps?.toolbar?.mode) {
    // 如果没有配置，返回默认值
    return "ribbon";
  }

  return editorProps.toolbar.mode;
};

const internalMode = ref<"simple" | "ribbon">(getInitialModeFromEditorProps());

// 获取模式（支持 v-model:mode）
const mode = computed({
  get: () => internalMode.value,
  set: (value: "simple" | "ribbon") => {
    internalMode.value = value;
    // 更新 toolbarState 中的模式
    if (toolbarState) {
      toolbarState.value.mode = value === "simple" ? "simple" : "ribbon";
    }
    emit("update:mode", value);
    emit("mode-change", value);
  },
});

watch(
  () => editorProps?.toolbar?.mode,
  (newMode) => {
    if (
      newMode &&
      (newMode === "simple" || newMode === "ribbon")
    ) {
      if (newMode !== internalMode.value) {
        internalMode.value = newMode;
        // 同步更新 toolbarState
        if (toolbarState) {
          toolbarState.value.mode = newMode;
        }
      }
    }
  },
  { immediate: true }
);

watch(
  () => toolbarState?.value?.mode,
  (newMode) => {
    if (
      newMode &&
      toolbarState &&
      (newMode === "simple" || newMode === "ribbon")
    ) {
      if (newMode !== internalMode.value) {
        internalMode.value = newMode;
      }
    }
  },
  { immediate: true }
);

const activeTabId = ref<string>("home");

const handleTabChange = (tabId: string) => {
  activeTabId.value = tabId;
};

const toolbarClass = computed(() => ({
  "toolbar-simple": mode.value === "simple",
  "toolbar-ribbon": mode.value === "ribbon",
}));

provide(TOOLBAR_MODE_KEY, mode);
</script>

<style scoped>
.editor-toolbar {
  background: var(--editor-color-white);
  border-bottom: 1px solid var(--editor-border-color);
  box-shadow: var(--editor-shadow);
  overflow: hidden; /* 确保过渡动画时不会溢出 */
  position: relative;
}

/* 模式切换过渡动画 - 更优雅的效果 */
.toolbar-mode-enter-active {
  transition: opacity var(--toolbar-mode-transition-duration-enter, 0.35s)
      var(
        --toolbar-mode-transition-timing-enter,
        cubic-bezier(0.25, 0.8, 0.25, 1)
      ),
    transform var(--toolbar-mode-transition-duration-enter, 0.35s)
      var(
        --toolbar-mode-transition-timing-enter,
        cubic-bezier(0.25, 0.8, 0.25, 1)
      ),
    filter var(--toolbar-mode-transition-duration-enter, 0.35s)
      var(
        --toolbar-mode-transition-timing-enter,
        cubic-bezier(0.25, 0.8, 0.25, 1)
      );
}

.toolbar-mode-leave-active {
  transition: opacity var(--toolbar-mode-transition-duration-leave, 0.25s)
      var(
        --toolbar-mode-transition-timing-leave,
        cubic-bezier(0.55, 0.055, 0.675, 0.19)
      ),
    transform var(--toolbar-mode-transition-duration-leave, 0.25s)
      var(
        --toolbar-mode-transition-timing-leave,
        cubic-bezier(0.55, 0.055, 0.675, 0.19)
      ),
    filter var(--toolbar-mode-transition-duration-leave, 0.25s)
      var(
        --toolbar-mode-transition-timing-leave,
        cubic-bezier(0.55, 0.055, 0.675, 0.19)
      );
}

.toolbar-mode-enter-from {
  opacity: 0;
  transform: translateY(calc(var(--toolbar-mode-transform-distance, 8px) * -1))
    scale(var(--toolbar-mode-scale-min, 0.98));
  filter: blur(var(--toolbar-mode-blur, 2px));
}

.toolbar-mode-leave-to {
  opacity: 0;
  transform: translateY(var(--toolbar-mode-transform-distance, 8px))
    scale(var(--toolbar-mode-scale-min, 0.98));
  filter: blur(var(--toolbar-mode-blur, 2px));
}

.toolbar-mode-enter-to,
.toolbar-mode-leave-from {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
</style>
